<template>
    <div class="model-list-wp">
        <div class="new-box" @click="handleCreateModel">
            <img src="@/assets/images/new-project.png">
            <span class="text-title ellipsis">创建数据集</span>
        </div>
        <div class="list-header">
            <div class="title">
                <h2>{{ group ? group.name : '' }} ({{ listData.total }})</h2>
            </div>
            <div class="header-manager">
                <b-input v-model="query.name" size="small" placeholder="搜索" search @search="getSearchList"></b-input>
            </div>
        </div>
        <!--列表-->
        <ul class="list-wrap" v-if="!listData.loading">
            <li v-for="item in listData.rows" :key="item.id" class="base-list-item">
                <div class="list-item-inner">
                    <div class="list-item-img">
                        <b-icon :name="item.modelType==='DM'?'deploymentunit':'database'"/>
                        <div class="list-item-mask">
                            <b-button type="primary" icon="wrench" @click="handleDetail(item)">配置模型</b-button>
                            <div class="icon-box">
                                <i class="b-iconfont b-icon-edit-square" @click="handleEdit(item)" title="修改模型"></i>
                                <i class="b-iconfont b-icon-delete" @click="removeModel(item)" title="修改模型"></i>
                            </div>
                        </div>
                    </div>
                    <div class="list-item-info">
                        <span class="item-title">{{ item.name }}</span>
                    </div>
                </div>
            </li>
        </ul>
        <!--状态和分页-->
        <div style="height: 200px;" v-show="listData.loading" flex="main:center cross:center">
            <svg-loading name="loading02" :width="100"></svg-loading>
        </div>
        <b-empty v-show="!listData.loading && listData.rows.length===0">该分组下没有模型</b-empty>
        <div class="t-center pb-24" v-show="!listData.loading && listData.total>query.size">
            <b-page
                    :total="listData.total"
                    :current="query.page"
                    :page-size="query.size"
                    @change="pageChange"
            ></b-page>
        </div>
    </div>
</template>

<script setup>
    import {Message, MessageBox} from 'bin-ui-next'
    import * as api from '@/api/cube/index'
    import {reactive, ref, watch} from 'vue'
    import {throwError} from '@/utils/util'
    import {getDbCenterTables, getModelDetail} from '@/api/cube/index'
    import SvgLoading from '@/components/Common/SvgLoading/index.vue'
    import {useRouter} from 'vue-router'

    const props = defineProps({
        group: {
            type: Object,
            default: () => ({}),
        },
    })
    const query = reactive({
        name: '',
        page: 1,
        size: 12,
    })
    const listData = reactive({
        rows: [],
        total: 0,
        loading: false,
    })

    const getSearchList = async () => {
        try {
            listData.loading = true
            const res = await api.getModelList({pid: props.group.pid, ...query})
            listData.rows = res.data
            listData.total = res.total
        } catch (e) {
            throwError('model-list/getSearchList', e)
        }
        listData.loading = false
    }

    const pageChange = async (page) => {
        query.page = page
        await getSearchList()
    }


    const router = useRouter()
    const handleDetail = (item) => {
        const {id, name} = item
        if (item.directory === 'Y') {
            query.pid = id
            query.pidName = name
            getSearchList()
            return
        }
        let routeData = router.resolve({
            path: '/cube/edit',
            query: {id, name},
        })
        window.open(routeData.href, '_blank')
    }

    watch(() => props.group, () => {
        getSearchList()
    }, {immediate: true, deep: true})
</script>

<style scoped lang="scss">
  .model-list-wp {
    .new-box {
      width: 258px;
      height: 78px;
      margin: 16px 32px 16px 0;
      vertical-align: middle;
      border: 1px solid #39414d;
      background: #22272e;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      position: relative;
      cursor: pointer;
      color: #fff;

      img {
        width: 150px;
        height: 100%;
      }

      .text-title {
        padding-left: 4px;
        flex: 1;
        font-size: 20px;
        letter-spacing: 1px;
        font-family: YouSheBiaoTiHei, PingFangSC-Medium, PingFang SC, Microsoft YaHei, Arial, Helvetica, sans-serif;
      }

      &:hover {
        border-color: var(--bin-color-primary);

        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: rgba(36, 131, 255, 0.08);
        }
      }
    }

    .list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #3a4659;
      padding-bottom: 5px;
      padding-top: 10px;
      height: 56px;
      background: #171b22;
      z-index: 1;
      min-width: 1024px;

      .title {
        display: flex;
        align-items: center;
        padding: 5px 0;

        h2 {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 200px;
          font-size: 20px;
          letter-spacing: 2px;
          font-family: YouSheBiaoTiHei, PingFangSC-Medium, PingFang SC, Microsoft YaHei, Arial, Helvetica, sans-serif;
          color: var(--bin-color-primary);
          padding: 0 10px;
          border-left: 2px solid var(--bin-color-primary);
          font-weight: normal;
        }
      }
    }

    .list-wrap {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      padding-top: 8px;
      user-select: none;
      padding-bottom: 50px;
      margin-right: -32px;

      .base-list-item {
        margin: 16px 32px 16px 0;
      }

      .list-item-inner {
        display: flex;
        flex-direction: column;
        width: 258px;
        height: 184px;
        border: 1px solid #3a4659;
        outline: 1px solid transparent;
        transition: 0.2s;

        &:hover {
          outline: 1px solid var(--bin-color-primary);

          .list-item-img .list-item-mask {
            opacity: 1;
          }
        }

      }

      .list-item-img {
        width: 100%;
        height: 146px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .2s;
        position: relative;

        > .b-iconfont {
          font-size: 80px;
          position: absolute;
          background-color: #131e2d;
          color: var(--bin-color-primary);
          font-weight: lighter;
          opacity: .36;
        }

        .list-item-mask {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, .5);
          transition: .2s;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          opacity: 0;
          font-weight: 400;

          .icon-box {
            position: absolute;
            top: 6px;
            right: 0;
            width: 50px;
            display: flex;
            justify-content: center;
            z-index: 1;

            > i {
              cursor: pointer;
              font-size: 16px;

              &.b-icon-edit-square {
                color: var(--bin-color-primary);
              }

              &.b-icon-delete {
                margin-left: 5px;
                color: var(--bin-color-danger);
              }
            }
          }
        }
      }

      .list-item-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        height: 36px;
        background: #1d262e;
        transition: .2s;

        .item-title {
          width: 170px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 14px;
          font-family: YouSheBiaoTiHei, PingFangSC-Medium, PingFang SC, Microsoft YaHei, Arial, Helvetica, sans-serif;
          font-weight: lighter;
        }
      }
    }
  }

  .selected-table {
    color: rgb(255, 255, 255);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 8px;
    padding: 0 6px;
    height: 28px;
    line-height: 26px;
    border: 1px solid rgb(29, 33, 38);
    background: transparent;

    &:hover {
      background: #262c33;
    }

    > .b-icon-close {
      cursor: pointer;

      &:hover {
        color: var(--bin-color-danger-light4);
      }
    }
  }
</style>
